<script setup lang="ts">
import _ from 'lodash'
import { StyleValue } from 'vue'

const props = withDefaults(
  defineProps<{
    content?: string
    width?: number
    height?: number
    fontSize?: number
    fontWeight?: number
    bg?: string
    color?: string
    customStyle?: StyleValue | any
  }>(),
  {
    bg: 'linear-gradient(135deg, #fcff5e 0%, #cfff69 49%, #6efffd 100%), #ffdb00',
    color: '#2b2f36',
    fontWeight: 800,
    customStyle: {},
  },
)

const btnStyle = computed(() => {
  return {
    width: `${props.width}rpx`,
    height: `${props.height}rpx`,
    fontSize: `${props.fontSize}rpx`,
    background: props.bg,
    ...props.customStyle,
  } as StyleValue
})

const emit = defineEmits(['click'])
const btnClick = _.debounce(
  () => {
    emit('click')
  },
  500,
  {
    leading: true,
    trailing: false,
  },
)
</script>

<template>
  <button :style="btnStyle" class="gradient-button" @click="btnClick">
    {{ content }}
    <slot v-if="!content"></slot>
  </button>
</template>

<style scoped lang="scss">
.gradient-button {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 150rpx;
  height: 92rpx;
  padding: 0 20rpx;
  margin: 0;
  font-size: 32rpx;
  font-weight: v-bind(fontWeight);
  color: #2b2f36;
  background: linear-gradient(135deg, #fcff5e 0%, #cfff69 49%, #6efffd 100%), #ffdb00;
  border: none;
  border-radius: 60rpx;
}

button::after {
  padding: 0;
  border: 0;
}

.gradient-button:active {
  opacity: 0.8;
}
</style>
